<div class="modal-root">
  <div class="mask"></div>
  <div class="modal-container">
    <div class="modal-header" *ngIf="files && files.length">
      已选择{{ files.length }}张图片
    </div>
    <div class="modal-content">
      <div
        *ngFor="let f of files; let idx = index"
        class="rounded overflow-hidden mb-3"
      >
        <img [src]="f.$uri | async" class="w-full" />
      </div>
    </div>
    <div class="modal-footer">
      <form
        class="flex-col justify-between w-full text-sm"
        (ngSubmit)="confirmHandle($event)"
      >
        <div class="py-2">
          <input
            type="text"
            class="border focus:outline-none w-full p-1 bg-transparent"
            name="fileMessage"
            placeholder="添加说明"
            [(ngModel)]="msg"
          />
        </div>
        <div class="flex justify-between">
          <div>
            <app-add-file-btn
              (fileChange)="selectedFiles($event)"
            ></app-add-file-btn>
          </div>
          <div>
            <button
              type="button"
              class="btn btn-grey-700 mr-3 text-white"
              (click)="cancelHandle($event)"
            >
              取消
            </button>
            <button type="submit" class="btn btn-teal-600">
              发送消息
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
